<html>
<head>
<style>
body {
  font-family:helvetica, arial, sans-serif;
  font-size:80%;
  margin:10px;
}

#header {
  padding-bottom:1.5em;
  padding-top:1.5em;
}

#header h1 {
  font-size: 156%;
  display:inline;
  padding-bottom:43px;
  padding-left:75px;
  padding-top:40px;
  background:url(next.png) no-repeat;
  background-size:67px;
  background-position:1px 18px;
}

.section-header {
  background:#ebeff9;
  border-top:1px solid #b5c7de;
  font-size:99%;
  padding:3px 0 2px 5px;
  font-weight:bold;
  margin-bottom:1em;
  margin-top:4em;
}

.section-header.first {
  margin-top:1em;
}

#custom-domain {
  width:300px;
  margin-left:2px;
}

#footer {
  margin-top:4em;
}
</style>
<title>urlNeXT</title>
<script>

var number
var action

function setUrl()
{
    var count=0;
    var newUrl="";
    for(var i=chrome.extension.getBackgroundPage().spl.length;i>0;i--)
    {
      var item=chrome.extension.getBackgroundPage().spl[i-1];
      if (!isNaN(item) && item.length)
      {
        item="<a href=\"#\" onclick=\"numSelect("+(++count)+")\">"+item+"</a>";
        if(count==number)item="<b>"+item+"</b>";
      }
      if(item)newUrl=item+newUrl;
    }
    chrome.extension.getBackgroundPage().targets[chrome.extension.getBackgroundPage().lastTabId]=action*number;
    chrome.extension.getBackgroundPage().updateIcon(chrome.extension.getBackgroundPage().lastTabId);
    var elem=document.getElementById("currenturl");
    elem.innerHTML= newUrl;
    elem=document.getElementById("tnumber");
    elem.innerHTML= number;
}

function init()
{
  var target=chrome.extension.getBackgroundPage().targets[chrome.extension.getBackgroundPage().lastTabId];
  if (isNaN(target) || target.length==0) target=1;
  number=Math.abs(target);
  if (target>=0)
  {
    action=1;
    document.getElementById("action1").checked=true;
  } else
  {
    action=-1;
    document.getElementById("action2").checked=true;
  }
  setUrl();
}

function closeTab()
{
  chrome.tabs.getSelected(null, function(tab)
  {
    chrome.tabs.remove(tab.id);
  })
}

function numSelect(newnumber)
{
  number=newnumber;
  setUrl();
}

function dataChange()
{
  if (document.getElementById("action1").checked)
    action=1;
  else if(document.getElementById("action2").checked)
    action=-1;
  setUrl();
}


</script>
</head>
<body onLoad="init()">
<div id="header"><h1>urlNeXT Options Page</H1>
This setting is not persistent and only bound to 1 tab</div>
<div class="section-header first">Tab Setting</div>
<h2>URL: </h2><span id="currenturl"></span>
<p>Number to change from right (select from above url): <span id="tnumber">Unknown</span></p>
<div id="setting">
<form id="tabsetting" method="get" action="" onsubmit="return false;"> <fieldset><legend>Action</legend>
  <label for="action1"><input type="radio" name="action" id="action1" value="1" onclick="dataChange()">Next</label><br>
  <label for="action2"><input type="radio" name="action" id="action2" value="-1" onclick="dataChange()">Previous</label>
</fieldset></form>
</div>
<div id="footer">
  <button onclick="closeTab()">Close</button>
</div>
</body>
</html>
